<template>
  <view class="fbdzbox">
	  <view :style="{height:getstateheight()+'px'}"></view>
	  <view class="titie" :style="{height:gettitileheight()+'px'}">
		     <view style="width:20rpx;"  @click="back" class="iconfont icon-fanhui"></view>
			 <view class="ti-t">发布选择</view>
			 <view  style="width:20rpx;" ></view>
	  </view>
	 <view class="img">
	 	<image src="../../static/img/fb-bg.jpg" mode="aspectFill"></image>
		<view class="top">海量用户 · 快速出租 · 保护隐私</view>
		<view class="bu">手机号码加密处理 · 防止骚扰！</view>
	 </view>
	 <view class="con">
	 	<view class="bt">房屋住宅</view>
	 	<view class="fwitem"  v-for="(i,index) in item" :key="i.name" :class="{bor:index!==item.length-1}" @click="go(i.name,i.type)" >
	 			<view class="iconfont icon  l" :class="i.icon"></view>
	 			<view class="r">
	 				      <view class="r-l">
	 				      	<view class="r-t">{{i.name}}</view>
	 				      	<view class="r-b">{{i.con}}</view>
	 				      </view>
	 					  <view class="l iconfont icon-fanhui"></view>
	 			</view>
	 	</view>
	 </view>
  </view>
</template>

<script setup>
	import {ref} from 'vue'
	import {onShow,onHide,onUnload} from '@dcloudio/uni-app'
	import {getstateheight,gettitileheight} from '@/utils/getinfo.js'
	const isfscon=ref(false)
	const item=[
		{
			name:"整套出租",
			con:"出租整套住宅房屋",
			icon:"iconfont icon-zhengtaofangzi red",
			type:"0"
		},
		{
			name:"单间/合租",
			con:"出租住宅房屋中的单间",
			icon:"iconfont icon-haofangtuoiconfont_zhinengmensuo green ",
			type:"1"
		},
		{
			name:"短租/日租",
			con:"按天出租的房子",
			icon:"iconfont icon-haofangtuo400iconfontwodeershoufang cs ",
			type:"2"
		},
		{
			name:"公寓住宅",
			con:"出租公寓住宅房屋",
			icon:"iconfont icon-kezhangongyu blue",
			type:"3"
		}
	]
	  const back=()=>{
		  uni.switchTab({
		  	url:"/pages/index/index"
		  })
	  }
	  onShow(()=>{
		  isfscon.value=false
		  uni.hideTabBar()
	  })
	  onHide(()=>{
		  if(isfscon.value)return
		   uni.showTabBar()
	  })
	  onUnload(()=>{
	  		   uni.showTabBar()
	  })
	  const go=(name,type)=>{
		  isfscon.value=true
		  uni.navigateTo({
		  	url:`/pages/fbcon/fbcon?name=${name}&type=${type}`
		  })
	  }
</script>

<style lang="scss" scoped>
	.red{
		background-color: #f97569 !important;
	}
	.green{
		background-color: #5abf69 !important;
		font-size: 30rpx !important;
	}
	.blue{
		background-color: #678cf2 !important;
	}
	.cs{
		background-color: #fd8140 !important;
	}
	.bor{
		border-bottom: 1rpx solid #eee;
	}
	.con{
		padding: 0 25rpx;
	}
	.fbdzbox{
		height: 100%;
		width: 100%;
		overflow: hidden;
		padding: 20rpx;
		.titie{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding:0 25rpx ;
			.ti-t{
				height: 30rpx;
			}
		}
		.img{
			height: 250rpx;
			width: 100%;
			position: relative;
			font-size: 27rpx;
			color: #fff;
			margin-top: 10rpx;
			image{
				height: 100%;
				width: 100%;
				position: absolute;
				top: 0;
				left: 0;
				border-radius: 20rpx;
			}
			.top{
				width: 100%;
				position: absolute;
				padding-left:150rpx;
				top: 30%;
			}
			.bu{
				width: 100%;
				position: absolute;
				padding-left:150rpx;
				top: 47%;
			}
		}
	     .bt{
			 height: 90rpx;
			 font-size: 25rpx;
			 color: #7b7b7b;
			 line-height: 90rpx;
		 }
		 .fwitem{
			height: 150rpx;
			width: 100%;
			display: flex;
			align-items: center;
			.icon{
				height: 65rpx;
				width: 65rpx;
				border-radius: 50%;
				background-color: red;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20rpx;
				color: #fff;
				
			}
			.r{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.r-l{
					 .r-t{
						 height: 60%;
						 font-size: 31rpx;
						 font-weight: 700;
					 }
					 .r-b{
						 height: 40%;
						 font-size: 21rpx;color: #7b7b7b;
					 }
					 
				}
				.l{
					transform: rotate(-180deg);
					font-size: 20rpx;
				}
			}
		 }
	}
	
</style>
